<template>
	<div class="transact">
		<div class="transact_search">
			<div class="transact_hd">过户单管理</div>
			<div class="transact_bd" style="height: 150px">
				<div class="transact_bd_in" style="width: 900px; height: 95px">
					<div class="transact_system" style="">
						交易时间 <input type="date" /> / <input type="date" />
					</div>
					<div class="transact_system" style="float: left">
						买&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家 <input type="text" />
					</div>
					<div class="transact_system" style="float: left">
						卖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家 <input type="text" />
					</div>
					<div class="btn_search">查询</div>
				</div>
			</div>
		</div>
		<el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" class="title" />
			<el-table-column prop="card" label="过户单单号" />
			<el-table-column prop="buier" label="买家" />
			<el-table-column prop="seller" label="卖家" />
			<el-table-column prop="name" label="操作员" />
			<el-table-column prop="time" label="过户时间" width="180" />
			<el-table-column prop="last" label="最后编辑时间" width="180" />
			<el-table-column prop="whether" label="是否作废" />
			<el-table-column prop="operate" label="操作" />
		</el-table>
		<div class="history">没有相关记录!</div>
	</div>
</template>
<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	import type {
		ElTable
	} from 'element-plus'
	
	const tableData = ref([{
		card: '12332211',
		buier: '周杰伦',
		seller: '黎明',
		name: '吴彦祖',
		time: '2020-11-22 11:11:22',
		last: '2022-01-22 11:11:22',
		whether: '否',
		operate: '在路上'
	}, {
		card: '21332433',
		buier: '梁朝伟',
		seller: '刘德华',
		name: '郭富城',
		time: '2022-04-02 11:11:22',
		last: '2021-04-02 11:11:22',
		whether: '否',
		operate: '在路上'
	} ])
</script>
<style scoped>
	.el-table .cell{
		color: #1A71B4;
	}
	.history {
		color: #666666;
		font-size: 14px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.transact_search {
		width: 1000px;
		font-size: 14px;
	}

	.transact_hd {
		height: 40px;
		line-height: 40px;
		background-color: #f7f7f7;
		padding-left: 25px;
		border: 1px solid #e8e9ea;
		color: #2e6095;
	}

	.transact_bd {
		border: 1px solid #e8e9ea;
		border-top: none;
		height: 100px;
		overflow: hidden;
		color: #333;
	}

	.transact_bd_in {
		width: 700px;
		height: 45px;
		line-height: 45px;
		margin: 25px 0 0 25px;
		background-color: #f9f9f9;
		border: 1px solid #eee;
	}

	.transact_system,
	.parameter {
		margin-left: 10px;
	}

	.transact_bd_in input {
		height: 30px;
		width: 200px;
		border: 1px solid #cbced0;
	}

	.btn_search {
		width: 60px;
		height: 30px;
		line-height: 30px;
		background-color: #dbdee0;
		border: 1px solid #cbced0;
		text-align: center;
		float: left;
		margin: 8px 0 0 15px;
		cursor: pointer;
	}

	.transact_tb {
		text-align: center;
		border: 1px solid #eee;
		font-size: 14px;
		color: #666;
		min-width: 1000px;
		overflow: scroll;
	}

	.transact_tb thead {
		height: 35px;
		background-color: #eee;
		color: #2e6095;
		font-weight: 700;
	}

	.transact_tb tr td {
		height: 35px;
	}
</style>
